<template>
        <div id="login" 
        style="background-color: black;position: relative; 
        width: 100%; height: 100%; display: flex; align-items: center; 
        flex-direction: column; justify-content: center;" >

            <img src="" alt="" style="height: 100px; width: 100px; margin: 20px 0;">
            <h1 style="color: aliceblue;">巅峰筑梦师</h1>
            <p style="margin: 20px 0; color: aliceblue; font-weight: 700; letter-spacing: 10px;">以梦为主题的多功能有趣网站</p>
            <button id="QQLogin" 
            style="cursor: pointer; background: transparent; color: aliceblue; 
            padding: 5px 20px; border-radius: 5px; margin: 20px 0; border: 1px solid aliceblue; letter-spacing: 2px;"
            >
            <router-link :to="{name:'login'}">12</router-link>
            </button>

            <a href="http://localhost:5173/" style="color: aliceblue; cursor: pointer; z-index: 10; text-decoration: none;">游客身份进入</a>
        </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import { loadSlim } from "tsparticles-slim";
const data = reactive({
  options: {
    fpsLimit: 100,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: "push",
        },
        onHover: {
          enable: true,
          mode: "grab",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.6,
          size: 10,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: true,
      },
      move: {
        direction: "none",
        enable: true,
        outMode: "bounce",
        random: false,
        speed: 2,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          value_area: 800,
        },
        value: 60,
      },
      opacity: {
        value: 0.5,
      },
      shape: {
        type: "circle",
      },
      size: {
        random: true,
        value: 3,
      },
    },
    detectRetina: true,
  },
})
</script>

<style scoped>

</style>